<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="../CSS/button_Submit_Reset.css" rel="stylesheet" />
		<script src="../JQuery/jquery-3.6.0.min.js"></script>
		<script>
			function fo_fn_1(){
				$.ajax({
					url:"http://localhost:8080/car/getByColumns",
					data:$("#14_form_1").serialize(),
					
					success:function(data){
						for (var i = 0; i < data.length; i++) {
							$("#14_h5_"+(i+1)).text(JSON.stringify(data));
						}
						
						console.log("SSSSUccess");
					},
					error:function(data){
						for (var i = 0; i < data.length; i++) {
							$("#14_h5_"+(i+1)).text(JSON.stringify(data));
						}
						console.log("ERRRRRor");
					}
					
					
				})
			}
			
			function fo_fn_2(){
				$.ajax({
					url:"http://localhost:8080/car/insert",
					data:$("#14_form_2").serialize(),
					
					success:function(data){
						$("#14_h5_10").text("插入成功1条");
						console.log("InsertSSSSUccess");
					},
					error:function(data){
						$("#14_h5_10").text("插入失败，检查id");
						console.log("InsertERRRRRor");
					}
					
				})
			}
			
			function fo_fn_3(){
				$.ajax({
					url:"http://localhost:8080/car/delete",
					data:$("#14_form_3").serialize(),
					
					success:function(data){
						$("#14_h5_11").text("删除成功");
						console.log("DelSSSSUccess");
					},
					error:function(data){
						$("#14_h5_11").text("删除失败，检查id");
						console.log("DelERRRRRor");
					}
					
				})
			}
			
			function fo_fn_4(){
				$.ajax({
					url:"http://localhost:8080/car/update",
					data:$("#14_form_4").serialize(),
					
					success:function(data){
						$("#14_h5_12").text("更新成功");
						console.log("UpdateSSSSUccess");
					},
					error:function(data){
						$("#14_h5_12").text("更新失败，检查id");
						console.log("UpdateERRRRRor");
					}
					
				})
			}
			
			
		</script>
		<title>D18TestSSM</title>
	</head>
	<body>
		<a href="http://localhost:8080/car/get">car/get</a><br />
		
		<a href="http://localhost:8080/car/getByColumns">http://localhost:8080/car/getByColumns</a>
		
		<h5 id="14_h5_1">14_h5_1</h5>
		<h5 id="14_h5_2">14_h5_2</h5>
		<h5 id="14_h5_3">14_h5_3</h5>
		<h5 id="14_h5_4">14_h5_4</h5>
		<h5 id="14_h5_5">14_h5_5</h5>
		<h5 id="14_h5_6">14_h5_6</h5>
		<!-- ajax方式提交请求 和form表单提交请求 区别在 action属性 button元素 onclick函数 -->
		<form method="post" action="http://localhost:8080/car/getByColumns" id="14_form_1">
			<table>
				<tr><td><input type="text" name="id"placeholder="请输入id..."/></td></tr>
				<tr><td><input type="text" name="name"placeholder="请输入name..."/></td></tr>
				<tr><td><input type="text" name="color"placeholder="请输入color..."/></td></tr>
				<tr><td><input type="text" name="price"placeholder="请输入price..."/></td></tr>
				<tr><td><input type="button" value="ajax提交"onclick="fo_fn_1()" class="buttonSubmit"style="width: 70px;"/></td></tr>
				<!-- form表单提交 提交至action指定的url 不用写函数 返回一个网页 -->
				<tr><td><input type="submit" value="form提交" class="buttonSubmit"style="width: 70px;"/></td></tr>
				
			</table>
			
		</form>
		<!-- insert -->
		<h5>下面用于新增数据</h5>
		<h5 id="14_h5_10">14_h5_10 将显示数据</h5>
		<form method="post" action="http://localhost:8080/car/insert" id="14_form_2">
			<table>
				<tr><td><input type="text" name="id"placeholder="请输入id..."/></td></tr>
				<tr><td><input type="text" name="name"placeholder="请输入name..."/></td></tr>
				<tr><td><input type="text" name="color"placeholder="请输入color..."/></td></tr>
				<tr><td><input type="text" name="price"placeholder="请输入price..."/></td></tr>
				<tr><td><input type="button" value="ajax提交"onclick="fo_fn_2()" class="buttonSubmit"style="width: 70px;"/></td></tr>
				<!-- form表单提交 提交至action指定的url 不用写函数 返回一个网页 -->
				<tr><td><input type="submit" value="form提交" class="buttonSubmit"style="width: 70px;"/></td></tr>
				
			</table>
			
		</form>
		
		
		<h5>下面用于删除数据</h5>
		<h5 id="14_h5_11">14_h5_11 将显示数据</h5>
		<form method="post" action="http://localhost:8080/car/delete" id="14_form_3">
			<table>
				<tr><td><input type="text" name="id"placeholder="请输入id..."/></td></tr>
				<tr><td><input type="text" name="name"placeholder="请输入name..."/></td></tr>
				<tr><td><input type="text" name="color"placeholder="请输入color..."/></td></tr>
				<tr><td><input type="text" name="price"placeholder="请输入price..."/></td></tr>
				<tr><td><input type="button" value="ajax提交"onclick="fo_fn_3()" class="buttonSubmit"style="width: 70px;"/></td></tr>
				<!-- form表单提交 提交至action指定的url 不用写函数 返回一个网页 -->
				<tr><td><input type="submit" value="form提交" class="buttonSubmit"style="width: 70px;"/></td></tr>
				
			</table>
			
		</form>
		
		<h5>下面用于更新数据</h5>
		<h5 id="14_h5_12">14_h5_12 将显示数据</h5>
		<form method="post" action="http://localhost:8080/car/update" id="14_form_4">
			<table>
				<tr><td><input type="text" name="id"placeholder="请输入id..."required="required"/></td></tr>
				<tr><td><input type="text" name="name"placeholder="请输入name..."/></td></tr>
				<tr><td><input type="text" name="color"placeholder="请输入color..."/></td></tr>
				<tr><td><input type="text" name="price"placeholder="请输入price..."/></td></tr>
				<tr><td><input type="button" value="ajax提交"onclick="fo_fn_4()" class="buttonSubmit"style="width: 70px;"/></td></tr>
				<!-- form表单提交 提交至action指定的url 不用写函数 返回一个网页 -->
				<tr><td><input type="submit" value="form提交" class="buttonSubmit"style="width: 70px;"/></td></tr>
				
			</table>
			
		</form>
		
	</body>
</html>
